<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px;
            border: #bfa 3px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        table {
            width: 50%;
        }

        td {
            border: 1px black solid;
        }

        .t1 {
            width: 40%;
            margin: 0 auto;
            border: 1px black solid;
            /* border-spacing: 0;设置边框间的间距 */
            /* 边框合并 */
            border-collapse: collapse;
        }

        /* 如果表格没有使用tbody，则浏览器会自动创建并把tr放入
            因此tr不是table的子元素 */
        tbody>tr:nth-child(2n+2) {
            background-color: #cfc;
        }
    </style>
</head>

<body>
    <table>
        <!-- tr表示一行 -->
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <hr>
    <!-- 长表格 -->
    <table>
        <thead>
            <tr>
                <td>日期</td>
                <td>支出</td>
                <td>收入</td>
                <td>合计</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2018</td>
                <td>8000</td>
                <td>4000</td>
                <td>4000</td>
            </tr>
            <tr>
                <td>2019</td>
                <td>9000</td>
                <td>4000</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>2020</td>
                <td>10000</td>
                <td>5000</td>
                <td>5000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>14000</td>
            </tr>
        </tfoot>
    </table>


    <table class="t1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>所属势力</td>
        </tr>
        <tr>
            <td>酒吞童子</td>
            <td>男</td>
            <td>大江山</td>
        </tr>
        <tr>
            <td>玉藻前</td>
            <td>男</td>
            <td>京都</td>
        </tr>
        <tr>
            <td>大岳丸</td>
            <td>男</td>
            <td>海国</td>
        </tr>
    </table>
</body>

</html>